<template>
	<view class="home">
		<!-- app首页 -->
		<view class="topDiv">
			<view class="searchDiv">
				<u-row gutter="16">
					<u-col span="9">
						<u-search :show-action="false" bg-color="#FECE35" search-icon-color="black"  placeholder="搜索你想要的商品..." v-model="searchData"></u-search>
					</u-col>
					<u-col span="1">
						<u-icon name="calendar" size="28"></u-icon>
					</u-col>
					<u-col span="1">
						<u-icon  name="list-dot" size="28"></u-icon>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 轮播部分 -->
		<view class="swipeDiv">
			<view class="contextSwipe">
			  <u-swiper :list="swiperDatas"></u-swiper>
			</view>
		</view>
		<!-- 按钮菜单 -->
		<view class="btnMenu">
			<!-- 按钮宫格 -->
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(item,index) in btnList" :key="index">
					<view class="btnDiv">
						<view @click="doScan" :class="'t-icon '+item.icon"></view><br/>
						<text>{{ item.label }}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播广告的图片
				swiperDatas:[
					"https://img2.baidu.com/it/u=252215651,1642930269&fm=253&fmt=auto&app=138&f=JPEG?w=1600&h=500",
					"https://img.zcool.cn/community/01c9a5596615d3a8012193a30da127.jpg@2o.jpg"
				],
				// 按钮信息
				btnList:[
					{
						icon:"t-icon-shouji",
						label:"精品手机"
					},
					{
						icon:"t-icon-bijibendiannao",
						label:"平板电脑"
					},
					{
						icon:"t-icon-dianshi",
						label:"游戏娱乐"
					},
					{
						icon:"t-icon-dangao",
						label:"数码家电"
					},
					{
						icon:"t-icon-chuangyi",
						label:"母婴用品"
					}
				]
			}
		},
		methods:{
			doScan(){
				// 允许从相机和相册扫码
				// uni.scanCode({
				// 	success: function (res) {
				// 		console.log('条码类型：' + res.scanType);
				// 		console.log('条码内容：' + res.result);
				// 	}
				// });
				uni.vibrateLong({
					success: function () {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style scoped>
	.topDiv{
		width: 100vw;
		height: 280upx;
		background-color: #FEC104;
	}
	.searchDiv{
	    position: relative;
		top:190upx
	}
	.swipeDiv{
		width: 100vw;
		height: 300upx;
		background-color: #F6F6F6;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	} 
	.contextSwipe{
		width: 90vw;
		height: 100%;
		margin-top: 30upx;
	}
	.btnMenu{
		width: 100vw;
		height: 180upx;
		background-color: #F6F6F6;
	}
	.btnDiv{
		text-align: center;
	}
</style>